<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务区域选择器测试</title>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        }
        .test-result {
            margin-top: 20px;
            padding: 15px;
            background: #f0f9ff;
            border: 1px solid #0ea5e9;
            border-radius: 4px;
        }
        .service-area-selector {
            width: 100%;
        }
        .area-config {
            margin-top: 16px;
        }
        .selected-area-info {
            margin-top: 12px;
        }
        .area-tag {
            margin-right: 8px;
            margin-bottom: 4px;
        }
        .area-preview {
            margin-top: 16px;
            padding: 12px;
            background: #f5f7fa;
            border-radius: 4px;
        }
        .preview-content {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #606266;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <h1>服务区域选择器测试</h1>
            
            <el-form label-width="120px">
                <service-area-selector 
                    v-model="serviceArea" 
                    @change="handleAreaChange">
                </service-area-selector>
            </el-form>
            
            <div class="test-result" v-if="serviceArea">
                <h3>选择结果：</h3>
                <p><strong>服务区域：</strong>{{ serviceArea }}</p>
                <div v-if="areaData">
                    <p><strong>区域类型：</strong>{{ areaData.areaType }}</p>
                    <p><strong>详细数据：</strong></p>
                    <pre>{{ JSON.stringify(areaData.areaData, null, 2) }}</pre>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, computed, watch, onMounted } = Vue;
        const { ElFormItem, ElRadioGroup, ElRadio, ElSelect, ElOption, ElInput, ElAlert, ElTag, ElIcon } = ElementPlus;

        // 服务区域选择器组件
        const ServiceAreaSelector = {
            template: `
                <div class="service-area-selector">
                    <el-form-item label="服务范围类型" prop="areaType">
                        <el-radio-group v-model="areaType" @change="handleAreaTypeChange">
                            <el-radio label="nationwide">全国范围</el-radio>
                            <el-radio label="province">省内服务</el-radio>
                            <el-radio label="city">市内服务</el-radio>
                            <el-radio label="district">区内服务</el-radio>
                            <el-radio label="custom">自定义区域</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <!-- 全国范围 -->
                    <div v-if="areaType === 'nationwide'" class="area-config">
                        <el-alert
                            title="全国范围服务"
                            description="您的服务将覆盖全国所有地区，请确保您有能力提供全国范围的服务。"
                            type="info"
                            :closable="false"
                            show-icon
                        />
                    </div>

                    <!-- 省内服务 -->
                    <div v-if="areaType === 'province'" class="area-config">
                        <el-form-item label="选择省份" prop="selectedProvince">
                            <el-select
                                v-model="selectedProvince"
                                placeholder="请选择省份"
                                @change="handleProvinceChange"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="province in provinces"
                                    :key="province.code"
                                    :label="province.name"
                                    :value="province.code"
                                />
                            </el-select>
                        </el-form-item>
                        
                        <div v-if="selectedProvince" class="selected-area-info">
                            <el-tag type="success">
                                服务范围：{{ getProvinceName(selectedProvince) }}全省
                            </el-tag>
                        </div>
                    </div>

                    <!-- 自定义区域 -->
                    <div v-if="areaType === 'custom'" class="area-config">
                        <el-form-item label="自定义服务区域" prop="customArea">
                            <el-input
                                v-model="customArea"
                                type="textarea"
                                :rows="3"
                                placeholder="请详细描述您的服务区域，如：北京市朝阳区、海淀区、西城区；上海市浦东新区、黄浦区等"
                            />
                        </el-form-item>
                        
                        <el-alert
                            title="自定义区域说明"
                            description="请详细描述您能够提供服务的具体区域，建议按照省市区的格式填写，多个区域用分号分隔。"
                            type="warning"
                            :closable="false"
                            show-icon
                        />
                    </div>

                    <!-- 服务区域预览 -->
                    <div v-if="serviceAreaText" class="area-preview">
                        <el-form-item label="服务区域预览">
                            <div class="preview-content">
                                <span>📍 {{ serviceAreaText }}</span>
                            </div>
                        </el-form-item>
                    </div>
                </div>
            `,
            props: {
                modelValue: {
                    type: String,
                    default: ''
                }
            },
            emits: ['update:modelValue', 'change'],
            setup(props, { emit }) {
                const areaType = ref('district');
                const selectedProvince = ref('');
                const customArea = ref('');

                const provinces = ref([
                    { code: '110000', name: '北京市' },
                    { code: '120000', name: '天津市' },
                    { code: '310000', name: '上海市' },
                    { code: '440000', name: '广东省' },
                    { code: '320000', name: '江苏省' },
                    { code: '330000', name: '浙江省' },
                    { code: '510000', name: '四川省' }
                ]);

                const serviceAreaText = computed(() => {
                    switch (areaType.value) {
                        case 'nationwide':
                            return '全国范围服务';
                        case 'province':
                            if (selectedProvince.value) {
                                return `${getProvinceName(selectedProvince.value)}全省`;
                            }
                            return '';
                        case 'custom':
                            return customArea.value;
                        default:
                            return '';
                    }
                });

                const getProvinceName = (code) => {
                    const province = provinces.value.find(p => p.code === code);
                    return province ? province.name : '';
                };

                const handleAreaTypeChange = () => {
                    selectedProvince.value = '';
                    customArea.value = '';
                };

                const handleProvinceChange = () => {
                    // 省份变化处理
                };

                // 监听服务区域文本变化
                watch(serviceAreaText, (newValue) => {
                    emit('update:modelValue', newValue);
                    emit('change', {
                        areaType: areaType.value,
                        areaText: newValue,
                        areaData: {
                            province: selectedProvince.value,
                            custom: customArea.value
                        }
                    });
                }, { immediate: true });

                return {
                    areaType,
                    selectedProvince,
                    customArea,
                    provinces,
                    serviceAreaText,
                    getProvinceName,
                    handleAreaTypeChange,
                    handleProvinceChange
                };
            }
        };

        // 创建应用
        createApp({
            components: {
                ServiceAreaSelector
            },
            setup() {
                const serviceArea = ref('');
                const areaData = ref(null);

                const handleAreaChange = (data) => {
                    console.log('区域变化:', data);
                    areaData.value = data;
                };

                return {
                    serviceArea,
                    areaData,
                    handleAreaChange
                };
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>
